<template>
  <div>
    <el-tree
      :data="data"
      node-key="id"
      :props="defaultProps"
      @check="getCheckedKeys"
      ref='tree'
      :show-checkbox="showCheckbox"
      default-expand-all
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  props: ["showCheckbox", "roleId"],
  created() {
    this.getMenuData();
  },
  watch:{
    roleId: {
        handler: function (newValue) {
            console.log("newValue：",newValue);
            this.$axios.get("/api/role/checked/" + newValue).then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                    this.checked = res.data.data;
                }
                this.$refs.tree.setCheckedKeys(this.checked);
            })
            .catch();
        },
        immediate: true
    },
  },
  data() {
    return {
      data: [],
      checked: [],
      defaultProps: {
        children: "menus",
        label: "menuname",
      },
    };
  },
  methods: {
    //获取菜单数据
    getMenuData() {
      this.$axios
        .get("/api/menu/all")
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.data = res.data.data;
          }
        })
        .catch(() => {});
    },
    //获取已勾选结点的id
    getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
        this.$emit("callFather", this.$refs.tree.getCheckedKeys());
    },
  },
};
</script>